<template>
  <div class="app-container">
    <el-divider>待处理工作业务</el-divider>
    <el-table :data="taskLists">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="任务编号" prop="taskId" />
      <el-table-column label="任务名称" prop="taskName" />
      <el-table-column label="发布人" prop="leaderName" />
      <el-table-column label="时间" prop="time" />
      <el-table-column label="具体内容" prop="taskRemark" />
      <el-table-column label="生产进度" prop="progress">
        <template slot-scope="scope">
          <el-tag>{{progress[scope.row.progress]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['produce']"
            size="mini"
            type="text"
            @click="addProduce(scope.row)"
            >开始生产</el-button
          >
          <el-button
            v-hasPermi="['quality']"
            size="mini"
            type="text"
            @click="addQuality(scope.row)"
            >开始质检</el-button
          >
          <el-button
            v-hasPermi="['package']"
            size="mini"
            type="text"
            @click="addPackage(scope.row)"
            >开始包装</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      center
      title="开始生产"
      :visible.sync="openProduce"
      width="600px"
      append-to-body
    >
      <el-form ref="produceForm" label-width="80px" :model="produceForm">
        <el-row>
          <el-form-item label="任务ID" prop="nickName"
            ><el-input
              :disabled="true"
              v-model="taskInfo.taskId"
              placeholder="请输入"
          /></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="任务名称" prop="nickName"
            ><el-input
              :disabled="true"
              v-model="taskInfo.taskName"
              placeholder="请输入"
          /></el-form-item>
        </el-row>
        <el-row>
          <!-- <el-form-item label="现场照片" prop="nickName"
            ><el-input
              v-model="produceForm.image"
              placeholder="请输入"
          /></el-form-item> -->
          <el-form-item label="现场照片" prop="imgae">
            <el-upload

              class="avatar-uploader"
              :on-change="getProducePhoto"
              :show-file-list="false"
              :auto-upload="false"
              accept="image/*"
            >
              <img
                style="width:100%;"
                v-if="produceForm.image"
                :src="produceForm.image"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProduce">完成生产</el-button>
        <el-button @click="cancelProduce">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      center
      title="开始质检"
      :visible.sync="openQuality"
      width="600px"
      append-to-body
    >
      <el-form ref="qualityForm" label-width="80px" :model="qualityForm">
        <el-row>
          <el-form-item label="任务ID" prop="nickName"
            ><el-input
              :disabled="true"
              v-model="taskInfo.taskId"
              placeholder="请输入"
          /></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="任务名称" prop="nickName"
            ><el-input
              :disabled="true"
              v-model="taskInfo.taskName"
              placeholder="请输入"
          /></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="质检结果"
            ><el-input v-model="qualityForm.result" placeholder="请输入"
          /></el-form-item>
        </el-row>
        <el-row>
            <!-- <el-form-item label="现场照片" prop="nickName"
            ><el-input
              v-model="qualityForm.image"
              placeholder="请输入"
          /></el-form-item> -->
          <el-form-item label="现场照片" prop="imgae">
            <el-upload
              class="avatar-uploader"
              :on-change="getQualityPhoto"
              :show-file-list="false"
              :auto-upload="false"
              accept="image/*"
            >
              <img
                style="max-width:100%;"
                v-if="qualityForm.image"
                :src="qualityForm.image"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitQuality">完成</el-button>
        <el-button @click="cancelQuality">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      center
      title="开始包装"
      :visible.sync="openPackage"
      width="600px"
      append-to-body
    >
      <el-form ref="packageForm" label-width="80px" :model="packageForm">
        <el-row>
          <el-form-item label="任务ID" prop="nickName"
            ><el-input
              :disabled="true"
              v-model="taskInfo.taskId"
              placeholder="请输入"
          /></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="任务名称" prop="nickName"
            ><el-input
              :disabled="true"
              v-model="taskInfo.taskName"
              placeholder="请输入"
          /></el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="包装方式"
            ><el-input v-model="packageForm.method" placeholder="请输入"
          /></el-form-item>
        </el-row>
        <el-row>
            <!-- <el-form-item label="现场照片" prop="nickName"
            ><el-input
              v-model="packageForm.image"
              placeholder="请输入"
          /></el-form-item> -->
          <el-form-item label="现场照片" prop="imgae">
            <el-upload
              class="avatar-uploader"
              :on-change="getPackagePhoto"
              :show-file-list="false"
              :auto-upload="false"
              accept="image/*"
            >
              <img
                style="max-width:100%;"
                v-if="packageForm.image"
                :src="packageForm.image"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPackage">完成包装</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryTaskList,updateProgress } from "../../../api/trace/product";
import { formatDate } from "../../../utils/index.js";
import { uploadImg } from "@/api/common.js";

export default {
  name: "Record",
  data() {
    return {
      taskLists: [],
      recordForm: {},
      qualityForm: {},
      produceForm: {},
      packageForm: {},
      taskInfo: "",
      openQuality: false,
      openProduce: false,
      openPackage: false,
      qualityImageUrl: "",
      produceImageUrl: "",
      packageImageUrl: "",
      progress:{
        0:'未开始',
        1:'生产完成',
        2:'质检完成',
        3:'包装完成',
      }
    };
  },
  created() {
    this.taskList();
  },
  methods: {
    submitProduce(){
      debugger
      const operationArray = [];
      const id = new this.$snowFlakeId().generate();
      operationArray.push(id);
      operationArray.push(id);
      operationArray.push(this.taskInfo.materialId);
      operationArray.push("Produce");
      operationArray.push(this.$store.getters.nickName);
      operationArray.push(formatDate(new Date()));
      operationArray.push(this.produceForm.image);
      operationArray.push("");
      operationArray.push("");
      this.$httpBlock
        .post(this.$httpUrl + "/productapi/createOperation", {
          operationArray: operationArray,
        })
        .then((res) => {
          if (res.status === 200) {
            this.msgSuccess("数据上链成功");
            this.openProduce = false;
            let task={
                taskId:this.taskInfo.taskId,
                progress:1
            }
            updateProgress(task).then(res=>{
                this.msgSuccess("已完成生产");
                this.taskList();
            })
          }
        })
        .catch((err) => {
          this.msgError("存储异常 " + err);
        });
    },
    submitPackage(){
      const operationArray = [];
      const id = new this.$snowFlakeId().generate();
      operationArray.push(id);
      operationArray.push(id);
      operationArray.push(this.taskInfo.materialId);
      operationArray.push("Package");
      operationArray.push(this.$store.getters.nickName);
      operationArray.push(formatDate(new Date()));
      operationArray.push(this.packageForm.image);
      operationArray.push(this.packageForm.method);
      operationArray.push("");
      this.$httpBlock
        .post(this.$httpUrl + "/productapi/createOperation", {
          operationArray: operationArray,
        })
        .then((res) => {
          if (res.status === 200) {
            this.msgSuccess("数据上链成功");
            this.openPackage = false;
            let task={
                taskId:this.taskInfo.taskId,
                progress:3
            }
            updateProgress(task).then(res=>{
                this.msgSuccess("已完成包装");
                this.taskList();
            })
          }
        })
        .catch((err) => {
          this.msgError("存储异常 " + err);
        });
    },
    submitQuality(){
      const operationArray = [];
      const id = new this.$snowFlakeId().generate();
      operationArray.push(id);
      operationArray.push(id);
      operationArray.push(this.taskInfo.materialId);
      operationArray.push("Quality");
      operationArray.push(this.$store.getters.nickName);
      operationArray.push(formatDate(new Date()));
      operationArray.push(this.qualityForm.image);
      operationArray.push("");
      operationArray.push(this.qualityForm.result);
      this.$httpBlock.post(this.$httpUrl + "/productapi/createOperation", {
          operationArray: operationArray,
        }).then((res) => {
          if (res.status === 200) {
            this.msgSuccess("数据上链成功");
            this.openQuality = false;
            let task={
                taskId:this.taskInfo.taskId,
                progress:2
            }
            updateProgress(task).then(res=>{
                this.msgSuccess("已完成质检");
                this.taskList();
            })
          }
        }).catch((err) => {
          this.msgError("存储异常 " + err);
        });
    },
    getProduceFile() {},
    cancel() {
      this.workContentDialog = false;
    },
    cancelProduce() {
      this.openProduce = false;
    },
    cancelPackage() {
      this.openProduce = false;
    },
    cancelQuality() {
      this.openProduce = false;
    },
    addProduce(row) {
      this.taskInfo = row;
      this.openProduce = true;
    },
    addPackage(row) {
      this.taskInfo = row;
      this.openPackage = true;
    },
    addQuality(row) {
      this.taskInfo = row;
      this.openQuality = true;
    },
    taskList() {
      queryTaskList()
        .then((res) => {
          this.taskLists = res.data;
        })
        .catch((err) => {
          this.msgError("获取任务失败");
        });
    },



    getProducePhoto(file) {
      let data=new FormData();
      data.append('file',file.raw)
      uploadImg(data).then(res=>{
        this.$set(this.produceForm,'image',process.env.VUE_APP_BASE_API + res.imgurl);
      })
    },

    getQualityPhoto(file) {
      let data=new FormData();
      data.append('file',file.raw)
      uploadImg(data).then(res=>{
        this.$set(this.qualityForm,'image',process.env.VUE_APP_BASE_API + res.imgurl);
      })
    },

    getPackagePhoto(file) {
      let data=new FormData();
      data.append('file',file.raw)
      uploadImg(data).then(res=>{
        this.$set(this.packageForm,'image',process.env.VUE_APP_BASE_API + res.imgurl);
      })
    },

  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.image {
  width: 80%;
  display: block;
}
</style>
